import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
import { View, Image, Button, Text } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'

export default function OrderList(props) {
  const orderStr = {
    WaitPay:'等待支付',
    PaySuccess:'支付成功',
    TicketSuccess:'出票成功',
    TicketFailed:'出票失败',
    RefundAmountSuccess:'退款成功',
    AutoRefundAmountSuccess:'自动退款成功',
    RefundSuccess:'退款退票成功',
    AutoRefundSuccess:'自动退款退票成功'
  }
  const [filters,setFilters] = useState({
    page:1,
    pageSize:10
  })
  const [list,setList] = useState([])
  useDidShow(()=>{
    _initData({page:1},e=>{
      setList(e?.list)
    })
  })
  useReachBottom(()=>{
    if(filters.totalCount > list.length){
      _initData({page:filters.page+1},e=>{
        setList([...list,...e.list])
      })
    }
  })
  const _initData = (e,fun)=>{
    const data = {
      page:filters.page,
      pageSize:filters.pageSize,
      ...e
    }
    Taro.showLoading({title:'加载中...'})
    Taro.$get('/cinema-app/api/v1/order/page',data,'1').then(res=>{
      if(res.code == '1'){
        setFilters({...filters,...res.content.pagination})
        fun(res.content)
      }
    })
  }
  return (
    <View class="order-list">
      {list.length?<>
      <View className="list-start">
        {list.map((order,idx)=>{
          return <View className="list-item" key={order.orderId}>
            <View className="item-header">
              <View style={{display:'flex',alignItems:'center'}}>{order.cinemaName} <Text className="at-icon at-icon-chevron-right"></Text></View>
              <Text style={{color:'#f73'}} className='span'>{orderStr[order.status]}</Text>
            </View>
            
            {order.orderType === 'Goods'?<View onClick={()=>{
              Taro.navigateTo({
                url:`/mineSubPack/order-detail/index?id=${order.id}`
              })
            }}>{
            order.goodsViewList?.length>2?
              <View className="item-main">
                <View className="main-imgs not-bar" style={{overflowY:'auto'}}>
                {order.goodsViewList?.map(res=>(
                  <Image className='main-image' key={res.imageUrl} src={res.imageUrl} />
                ))}
                </View>
                <View className="main-mask">
                  共 {order.goodsViewList?.length} 件 <Text className="at-icon at-icon-chevron-right"></Text>
                </View>
              </View>:order.goodsViewList?.map(res=>(
              <View className="item-main" key={res.goodsId}>
                <Image className="main-img-square" mode="aspectFill" src={res.imageUrl} />
                <View className="main-info" style={{padding:8}}>
                  <View className="dot2 h2">{res.goodsName}</View>
                  <View className='p'>{res.goodsDesc}</View>
                </View>
                <View className="main-price" style={{padding:'8px 0'}}>
                  <View className="price-p"><Text style={{fontSize:'10px'}}>￥</Text> {res.payAmount}</View>
                  共 {res.goodsCount} 件
                </View>
              </View>
            ))}</View>:<View className="item-main" onClick={()=>{
              Taro.navigateTo({
                url:`/mineSubPack/order-detail/index?id=${order.id}`
              })
            }}>
              <Image className="main-img" src={order.filmPosterUrl} />
              <View className="main-info">
                <View className="dot2 h2">{order.filmNickName} {order.ticketList?.length}张</View>
                <View className='p'>{order.showTimeStart}</View>
                <View className='p'>{order.cinemaAddress}</View>
              </View>
            </View>}
            <View className="item-footer">
              <View style={{flex:1}}>
                {order.status==='WaitPay'?'需付款':'总价'}: <Text className='span' style={{fontSize: '10px'}}>￥</Text><Text className='strong'>{order.payAmount}</Text>
              </View>
              {order.status == 'WaitPay'?<View className='button' onClick={()=>{
                Taro.showLoading({title:'加载中...'})
                Taro.$post('/cinema-app/api/v1/order/push', {
                  orderId: order.id
                }, '1').then(res => {
                  if (res.code != '1') {
                    Taro.$toast(res.message)
                    return
                  }
                  if (res.content?.needPay) {
                    Taro.navigateTo({
                      url: `/pages/fineEngine/payment?id=${res.content.orderId}`
                    })
                  } else {
                    Taro.redirectTo({
                      url: `/orderSubPack/pay-status/index?id=${res.content.orderId}`
                    })
                  }
                })
              }}>立即支付</View>:null}
            </View>
          </View>
        })}
      </View>
      <View className="list-footer">{filters.totalCount > list.length?'加载更多':'已经到底了'}</View></>:
      <View className="var-empty" style={{padding:'240px 0'}} v-else>
        <Image src={require('@/images/mine/empty.svg')} style={{width: 80,height: 80}} mode="widthFix"></Image>
        <View className='p'>暂无相关订单</View>
      </View>}
    </View>
  )
}